AULA07 - Estrutura HTML e Formatação CSS: Formulários¶

Agenda¶

  • Apresentação
  • Apresentação Tags HTML de Formulários e suas propriedades
  • Referências
  • Perguntas

1. Apresentação Tags HTML de Formulários¶

  • Na elaboração de um formulário podemos utilizar diversas tags do HTML para estruturar o formulário.
  • Dentre elas estão as tags:
    • De títulos:
      • <h1>...</h1>,
      • <h2>...</h2>,
      • ...,
      • <h6>...</h6>,
    • De divisões, seções:
      • <div>...</div>,
      • <section>...</section>,
      • <p>...</p>,
      • etc.
  • Para maiores conhecimentos, consulte:

1.1. Links interessantes¶

  • Meu primeiro formulário - MDN Web Docs:
    • Meu primeiro Formulário HTML.
  • Utilizando o objeto Form com Javascript - MDN Web Docs:
    • Using FormData Objects.
  • Material da Caelum:
    • Apostila DESENVOLVIMENTO WEB COM HTML, CSS E JAVASCRIPT_Caelum.
  • Criando formulários com HTML5rocks:
    • Criação de formulários com HTML5.
  • E-book referente a Mobile HTML5:
    • Mobile HTML5: Chapter Files.
  • Exemplos interessantes:
    • Great HTML and CSS Forms You Can Use (49 Templates).

1.2. Elemento <form>...</form>¶

  • Cada vez que você deseja criar um formulário HTML, você deve iniciá-lo usando esse elemento, colocando todo o conteúdo do formulário dentro das tags de abertura e fechamento. Caso deseja ter mais de um formulário na página, basta criar novas tags.
  • Muitas tecnologias assistivas ou plugins do navegador podem usar o <form>...</form> e implementar atalhos especiais para torná-los mais fáceis de usar.
  • Sintaxe:

Arquivo: index.html

<!--Arquivo index.html-->

<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <title>Aula03</title>
    <link rel="stylesheet" href="css/estilo.css">
</head>
<body>
    <!-- Em algum lugar dentre da tag <body>...</body> -->

    <form> 
       ... inserir aqui suas tags de formulário aqui
    </form>

</body>
</html>

1.3. Atributos do Formulário¶

  • De acordo com MDN web Docs (2022?), o elemento <form>...</form> aceita a configuração de alguns atibutos:

Atributo autocomplete¶

  • Atributo autocomplete: define se os valores dos campos do formulário podem por padrão serem preenchidos automaticamente ou não.

    • off: usuário deve inserir explicitamente um valor em cada campo para cada uso, ou o documento fornece seu próprio método de preenchimento automático; o navegador não completa as entradas automaticamente.
    • on: o navegador pode preencher automaticamente os valores com base nos valores que o usuário inseriu durante os usos anteriores do formulário.

  • Exemplo:

Arquivo: index.html

<!--Arquivo index.html-->

<!DOCTYPE html>
<html lang="pt-br">
     <!-- Omitido para facilitar o entendimento  -->
<body>
    <!-- Em algum lugar dentre da tag <body>...</body> -->


    <form autocomplete="on"> 
        ... inserir aqui suas tags de formulário
    </form>  
</body>
</html>
  • A próxima vez que acessar o mesmo formulário, os campos serão carregados automatizamente.

Atributo name¶

  • Atributo name: indica o nome do formulário, pois em uma página poderei ter mais de um. E este atributo será usado para identificá-lo.

  • Exemplo:

Arquivo: index.html

<!--Arquivo index.html-->

<!DOCTYPE html>
<html lang="pt-br">
     <!-- Omitido para facilitar o entendimento  -->
<body>
    <!-- Em algum lugar dentre da tag <body>...</body> -->

    <form name="form1"> 
        ... inserir aqui suas tags de formulário
    </form>  
</body>
</html>

Atributo action¶

  • Atributo action: define onde os dados são enviados. Seu valor deve ser um URL válido. Se esse atributo não for fornecido, os dados serão enviados para o URL da página que contém o formulário.

  • Exemplo:

Arquivo: index.html

<!--Arquivo index.html-->

<!DOCTYPE html>
<html lang="pt-br">
     <!-- Omitido para facilitar o entendimento  -->
<body>
    <!-- Em algum lugar dentre da tag <body>...</body> -->

    <form action="http://teste.com" name="form1"> 
        ... inserir aqui suas tags de formulário
    </form> 
</body>
</html>

Atributo method¶

  • Atributo method: define como os dados são enviados.
    • O protocolo HTTP fornece várias maneiras de executar uma solicitação.
    • Dados de formulários HTML podem ser transmitidos através de métodos GET ou POST.
      • GET: se um formulário é enviado usando esse método, os dados enviados ao servidor são anexados ao URL. Os dados são anexados ao URL como uma série de pares nome/valor. Após a conclusão do endereço da Web de URL, incluímos um ponto de interrogação (?) seguido dos pares nome/valor, cada um separado por um e comercial (&).
      • POST: se um formulário é enviado usando esse método, os dados são anexados ao corpo da solicitação HTTP. As solicitações HTTP nunca são exibidas para o usuário. Do lado do sevidor, para acessar estes dados, depende da plataforma de desenvolvimento que você usa e de quaisquer frameworks específicos que você possa usar com ele.
  • Exemplo:

Arquivo: index.html

<!--Arquivo index.html-->

<!DOCTYPE html>
<html lang="pt-br">
     <!-- Omitido para facilitar o entendimento  -->
<body>
    <!-- Em algum lugar dentre da tag <body>...</body> -->

    <form action="http://teste.com" name="form1" method="POST"> 
        ... inserir aqui suas tags de formulário
    </form>
</body>
</html>

Atributo enctype¶

  • Atributo enctype: define o tipo MIME de conteúdo usado para enviar o formulário ao servidor.

    • method = "post": esse atributo enctype é o tipo MIME de conteúdo usado para enviar o formulário ao servidor. Os valores possíveis são:
      • application/x-www-form-urlencoded: é o valor padrão se o atributo não for especificado.
      • multipart/form-data: esse valor se estiver usando um elemento <input> com o atributo type definido como "file".
      • texto/simples (HTML5): esse valor pode ser substituído por um atributo formenctype em um elemento <button> ou <input>.

  • Exemplo:

Arquivo: index.html

<!--Arquivo index.html-->

<!DOCTYPE html>
<html lang="pt-br">
     <!-- Omitido para facilitar o entendimento  -->
<body>
    <!-- Em algum lugar dentre da tag <body>...</body> -->

    <form action="http://teste.com" name="form1" method="POST" enctype="multipart/form-data"> 
        ... inserir aqui suas tags de formulário
    </form>
</body>
</html>

Atributo novalidate¶

  • Atributo novalidate: define se o formulario deverá ou nào ser validado ao ser enviado.

  • Exemplo:

Arquivo: index.html

<!--Arquivo index.html-->

<!DOCTYPE html>
<html lang="pt-br">
     <!-- Omitido para facilitar o entendimento  -->
<body>
    <!-- Em algum lugar dentre da tag <body>...</body> -->

    <form action="http://teste.com" name="form1" method="POST" enctype="multipart/form-data" novalidate> 
        ... inserir aqui suas tags de formulário
    </form>
</body>
</html>

Atributo target¶

  • Atributo target: se o botão é um botão de envio, esse atributo é um nome ou palavra-chave indicando onde exibir a resposta que é recebida após o envio do formulário. As seguintes palavras-chaves possuem significados especiais:

    • _self: Carrega a resposta no mesmo contexto navegação como o atual. Esse valor é o padrão se o atributo não é especificado.
    • _blank: Carrega a resposta em um contexto de navegação sem nome.
    • _parent: Carrega a resposta no contexto de navegação pai do atual. Se não há nenhum pai, essa opção passa a ser o mesmo que _self.
    • _top: Carrega a resposta para o contexto de navegação no nível superior (ou seja, o contexto de navegação é um ancestral do atual e não possui nenhum pai). Se não possui nenhum pai, essa opção passa a agir da mesma forma que _self.

  • Exemplo:

Arquivo: index.html

<!--Arquivo index.html-->

<!DOCTYPE html>
<html lang="pt-br">
     <!-- Omitido para facilitar o entendimento  -->
<body>
    <!-- Em algum lugar dentre da tag <body>...</body> -->

    <form action="http://teste.com" name="form1" method="POST" enctype="multipart/form-data" novalidate target="_blank"> 
        ... inserir aqui suas tags de formulário
    </form>
</body>
</html>

1.4. Enviando dados de um Formulário¶

  • De acordo com [MDN Web Docs], basicamente, a web usa uma arquitetura cliente / servidor que pode ser resumida da seguinte forma. um cliente (geralmente um navegador da web) envia uma solicitação a um servidor (na maioria das vezes, um servidor da web como Apache , Nginx , IIS , Tomcat etc.), usando o protocolo HTTP . O servidor responde à solicitação usando o mesmo protocolo.
  • Para maiores detalhes, consulte MDN Web Docs (2022?).

Figura 1: representa a arquitetura
Fonte: MDN Web Docs (2022?). Disponível em: MDN Web Docs. Acesso em: 14 ago 2022.

2. Tags utilizadas na estrutura básica de um formulário no HTML¶

2.1. Tags <fieldset>...</fieldset> e <legend>...</legend>¶

  • É uma maneira de criar grupos que compartilham o mesmo propósito, para fins de estilo e semântica.
  • Você pode rotular um <fieldset>...</fieldset>, incluindo um <legend>...</legend> logo abaixo da tag de abertura <fieldset>.

  • O conteúdo textual da <legend>...</legend> formalmente descreve a finalidade da <fieldset>...</fieldset>. É incluído entre as tags <fieldset>...</fieldset>.

  • Sintaxe:

<fieldset>
    <legend> Legenda do Fieldset </legend>
    ....demais conteúdos ... 
</fieldset>
  • Exemplo - Sem formatação das propriedades CSS:

Arquivo: index.html

<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="utf-8">
    <title>Tags de Formulários</title>
</head>
<body>
  <form method="post" action="" name="form1" >
     <fieldset>                                <!-- Adicionado -->
        <legend>Informações Pessoais</legend>  <!-- Adicionado -->
     </fieldset>                               <!-- Adicionado -->
  </form>
</body>
</html>

Figura 2: tag fieldset sem formatação de estilos CSS
Fonte: Autoria própria
  • Exemplo - Aplicando algumas formatações CSS já conhecidas e outras novas:

Arquivo: index.html

<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="utf-8">
    <title>Tags de Formulários</title>
</head>
<body>
  <form method="post" action="" name="form1" >
     <fieldset>                                <!-- Adicionado -->
        <legend>Informações Pessoais</legend>  <!-- Adicionado -->
     </fieldset>                               <!-- Adicionado -->
  </form>
</body>
</html>

Arquivo: estilo.css

/* Todos os elementos dentro do fieldset, receberão estas configurações */
/* Exceto se forem especificados individualmente após esta definição */
/* Caso a altura não seja definida, ele assumirá conforme o conteúdo do fieldset. */

fieldset {
  width: 600px;                    /* largura */
  height: 200px;                   /* altura */
  font-family: Tahoma;             /* família de fontes */
  font-size: 22px;                 /* tamanho da fonte */
  font-weight: bold;               /* estilo negrito aplicado na fonte */
  background-color: #cbdaf2;       /* cor de plano de fundo */
  border: 3px #fff solid;          /* espessura cor estilo da borda do fieldset */
  text-shadow: 2px 2px 10px #fff;  /* x y blur  cor da sombra de texto */
  box-shadow: 2px 2px 10px black;  /* x y blur  cor da sombra da caixa  */
}

/* A legenda será configurada conforme indicado */
legend {
  color: #09224a;                  /* Cor do texto da legenda */
  background-color: #cbdaf2;       /* Cor de fundo da legenda */
  padding: 10px;
  border: 3px #fff solid;          /* Borda da legenda, modificando a espessura, cor, e tipo */
  border-radius: 2em;              /* Cantos arredondados da legenda */
  text-shadow: 2px 2px 10px #fff;
  box-shadow: 2px 2px 10px black;

}

Figura 3: tag fieldset com formatação de estilos CSS
Fonte: Autoria própria

2.2. Tag <label for=" ">...</label>¶

  • <label for = " ">...</label> é uma maneira de definirmos um rótulo (uma etiqueta) para os elementos de um formulário.

  • Elemento importante para criar formulários acessíveis (quando implementados adequadamente, os leitores de tela fazem a leitura do rótulo de um elemento do formulário juntamente com quaisquer instruções relacionadas).

    • O atributo for da tag <label>...</label> serve para relacionar uma tag <label>...</label> com uma tag <input> pelo seu respectivo identificador ID, assim o texto do label torna-se clicável, dando foco no input correspondente identificado pelo seu id.

  • Sintaxe:

<label for="identificador">Label</label>
  • Exemplo - Uso de rótulo clicável direcionando o foco para o input correspondente:

Arquivo: index.html

<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="utf-8">
    <title>Tags de Formulários</title>
</head>
<body>
  <form method="post" action="" name="form1" >
     <fieldset>                                 
        <legend>Informações Pessoais</legend>
         <label for="nome">Nome completo: </label>              <!-- Adicionado -->
         <input type="text" id="nome" name="nomeusuario">       <!-- Adicionado -->
     </fieldset>                                
  </form>
</body>
</html>

Arquivo: estilo.css

/* Arquivo estilo.css omitido para facilitar entendimento. Não foi modificado. */

Figura 4: tag label e input com formatação de estilos CSS
Fonte: Autoria própria

Propriedade CSS outline¶

  • Para modificar a cor e o formato interno da linha exibida ao redor da caixa de preenchimento, utilize a propriedade CSS outline para defini-la.

  • Exemplo:

Arquivo: index.html

<!-- Arquivo index.html -->
<!-- Estrutura HTML mantida a mesma do exemplo anterior -->
<!-- Omitido para facilitar entendimento -->

Arquivo: estilo.css

/* Arquivo estilo.css */
/* Modificado para formatar a propriedade CSS outline na tag input */

input {
  outline: darkblue solid 5px;   /* Adicionado  para destacar o outline da caixa de texto */
}

Figura 5: tag input e outline com formatação de estilos CSS
Fonte: Autoria própria

2.3. Tag <input>¶

  • Os campos de textos de um formulário são inseridos por meio da tag <input>. Eles são uma maneira muito conveniente para permitir que o usuário insira qualquer tipo de dados.

Atributos de formulários para a tag <input>:¶

Atributo name¶

  • name: serve para representar uma coleção de valores, enviados através de um formulário, para o servidor.
  • Sintaxe: 
<input type="text" id="nome" name="nomeusuario">

Atributo required¶

  • O atributo required é usado para marcar um campo do formulário como obrigatório, ao tentar enviar o formulário, os navegadores farão a verificação e exibirão uma mensagem e posicionarão o cursor no primeiro campo inválido.

  • Ao pressionar enter, o navegador fará a validação dos campos do formulário que possue a tag required. Caso exista um botão do tipo submit, a validação será feita no momento em que é pressionado.

  • Sintaxe:

<input type="text" id="nome" required>

Figura 6: tag input com o atributo required
Fonte: Autoria própria

Atributo min e max¶

  • Os atributos min e max são necessários quando é preciso definir os valores mínimos e máximos para campos de valores. Por exemplo, para os tipos number, range.
  • Sintaxe: 
<input type="number" id="idade" min="10" max="100">

Figura 7: tag input com o atributo required
Fonte: Autoria própria Fonte: Autoria própria

Atributo step¶

  • O atributo step é utilizado quando é ncessário incluir de quantos em quantos ocorre para os tipos de dados de entrada de data/hora, range, number.
  • No exemplo anterior, poderíamos supor que os valores deveriam saltar de 2 em 2. Assim:
  • Sintaxe: 
<input type="number" id="idade" min="10" max="100" step="2">

Atributo placeholder¶

  • O atributo placeholder: Este é o texto que aparece dentro da caixa de entrada de texto que descreve a finalidade da caixa brevemente.
  • Sintaxe: 
<fieldset>
        <legend>Informações Pessoais</legend>
        <label for="nome">Nome completo</label>
        <input type="text" id="nome" placeholder="Indique seu nome completo">
</fieldset>

Figura 8: tag input com o atributo placeholder
Fonte: Autoria própria

Atributo pattern¶

  • O atributo pattern é suportado onde quer que o atributo placeholder seja permitido.
  • Contém uma expressão regular de estilo javascript em que o valor de <input> deve satisfazer.

  • Ao inserir este atributo, a boa prática sugere a inserção do atributo title indicando a descrição do padrão. O atributo title é utilizado para indicar ao usuário o que deve ser inserido.

  • Sintaxe:

<fieldset>
        <legend>Informações Pessoais</legend>
        <!-- omitido -->
        <input type="text" id="cel" placeholder="+55(99)9999-9999" pattern="+55(99)9999-9999" title="+55(99)9999-9999">  <!-- inserido -->
</fieldset>
  • No exemplo, o que está dentro da caixa de texto é produzido pelo atributo placeholder.
  • O conteúdo que está em uma caixinha cinza externa, é produzido pelo atributo title ao passar o mouse sobre.

Figura 9: tag input com o atributo pattern e title (como apoio)
Fonte: Autoria própria Fonte: Autoria própria

Observação:¶

  • Consulte Criando uma máscara de Telefone com Javascript. Nascimento, Felipe (2019).
  • Consulte Criando uma expressão regular para validar telefone. Rozani, Igor (2018).

Atributo readonly¶

  • O atributo readonly indica que o usuário não pode modificar o valor de entrada.

  • O usuário não consegue selecionar a caixa de texto para inserir o nome.

  • Sintaxe:

<input type="text" id="nome" readonly>

Atributo disabled¶

  • O atributo disabled indica que o valor de entrada nunca é enviado com o resto dos dados do formulário. E que o usuário não pode modificar o valor de entrada.
  • O usuário não consegue selecionar a caixa de texto para inserir o nome.
  • Sintaxe: 
<input type="text" id="nome" disabled>

Atributo size¶

  • O atributo size indica qual é o tamanho físico da caixa. O conteúdo a ser digitado poderá ser maior do que o definido em size.
  • Sintaxe: 
<input type="text" id="nome" size="70">

Figura 10: tag input com o atributo size=10 e size=45
Fonte: Autoria própria Fonte: Autoria própria

Atributo maxlength¶

  • O atributo maxlength indica o número máximo de caracteres que podem ser inseridos na caixa. É aplicável nos tipos de dados text, password, url, search, tel, email. Este complementa o atributo size que define externamente a caixa de texto, e este aqui, internamente (conteúdo).
  • Sintaxe: 
<input type="text" id="nome" size="10" maxlength="30">

<input type="text" id="nome" size="45" maxlength="30">
  • Mesmo o size sendo igual a 10 ou 45, e o tamanho máximo (maxlength) definido como 30, não conseguimos digitar mais informação na caixa de texto.

Figura 11: tag input com o atributo size=10 | maxlength=30 e size=45 | maxlength=30
Fonte: Autoria própria Fonte: Autoria própria

Atributo autofocus¶

  • O atributo autofocus: especifica qual elemento terá o foco direcionado. Somente um único elemento por página poderá ter este atributo.
  • Sintaxe:
<input type="text" id="nome" autofocus>

Atributo type¶

  • O atributo type possui diversos valores (tipos) que poderão ser indicados conforme o conteúdo a ser inserido.
  • type: é um atributo obrigatório para a tag <input> e define o tipo de entrada de texto que está sendo usada.

  • O valor default é type="text".

  • Sintaxe:

    <input type="tipos" id="nome" name="nomeusuario">

2.3.1. Valores do atributo type para a tag <input>¶

Existentes em versões anteriores ao HTML¶

Valor type="text"¶

  • É exibido como uma caixa de entrada de dados, permite a inserção de uma linha de texto.

  • É o valor padrão para a tag <input>.

  • Sintaxe:

<fieldset>
   <legend> Texto </legend>
   <label for="texto">Type: text</label>
   <input type="text" id="texto">       <!--- Adicionado -->
</fieldset>

Valor type="password"¶

  • É um campo de senha. Exibido uma caixa com símbolos para ocultar a senha digitada.

  • Sintaxe:

Arquivo: index.html

<!-- Arquivo index.html -->
<!-- Estrutura HTML mantida a mesma do exemplo anterior, exceto a inclusão do input -->
<!-- Omitido para facilitar entendimento -->


<fieldset>
  <legend>Senha</legend>
  <label for="texto">Senha:</label>
  <input type="password" id="texto">       <!--- Adicionado -->
</fieldset>

Arquivo: estilo.css

/* Arquivo estilo.css */
/* Modificado para formatar a propriedade CSS da tag input do tipo password */


input[type="password"]{
  background: lightblue;
  color: darkblue;
}

Figura 12: tag input com o atributo type="password" e alteração cor de fundo
Fonte: Autoria própria

Valor type="radio"¶

  • É um botão de radio, permite escolher uma única opção entre os itens disponíveis.

  • Para que funcione adequadamente, é necessário definir o mesmo valor do atributo name para cada uma das opções de radio. Caso contrário, será possível selecioanr mais de um.

  • Sintaxe:

Arquivo: index.html

<!-- Arquivo index.html -->
<!-- Estrutura HTML mantida a mesma do exemplo anterior, exceto a inclusão das opções radio -->
<!-- Omitido para facilitar entendimento --> 


<fieldset>
  <legend>Radio Button</legend>
  <label for="if1"> Institutos Federais </label>
  <div class="radio">
     <input type="radio" id="if1" name="ifs" checked>
     <label for="if1" class="linha">IFSP</label>
  </div>
  <div class="radio">
     <input type="radio" id="if2" name="ifs">
     <label for="if2" class="linha">IFF</label>
  </div>
  <div class="radio">
     <input type="radio" id="if3" name="ifs">
     <label for="if3"  class="linha">IFMG</label>
  </div>
  <div class="radio">
     <input type="radio" id="if4" name="ifs">
     <label for="if4"  class="linha">IF Sudeste de Minas</label>
  </div>
</fieldset>

Figura 13: tag input com o atributo type="radio"
Fonte: Autoria própria

Valor type="checkbox"¶

  • É uma caixa de seleção, permite escolher mais de uma opção.
  • Para que funcione adequadamente, é necessário definir valores diferentes para o atributo name de cada uma das opções de checkbox.

  • Importante definir o atributo tabindex para indicar a sequencia de tabulaçòes via teclado.

  • Sintaxe:

Arquivo: index.html

<!-- Arquivo index.html -->
<!-- Estrutura HTML mantida a mesma do exemplo anterior, exceto a inclusão das opções checkbox -->
<!-- Omitido para facilitar entendimento --> 


<fieldset>
  <legend>Checkbox</legend>
  <div class="checkbox">
    <input type="checkbox" id="l1" name="ling1" checked tabindex="1">
    <label for="l1" class="linha">Python</label><br>
  </div>
  <div class="checkbox">
    <input type="checkbox" id="l2" name="ling2"  tabindex="2">
    <label for="l2"  class="linha">JAVA</label><br>
  </div>
  <div class="checkbox">
    <input type="checkbox" id="l3" name="ling3"  tabindex="3">
    <label for="l3"  class="linha">PHP</label><br>
  </div>
  <div class="checkbox">
    <input type="checkbox" id="l4" name="ling4"  tabindex="4" >
    <label for="l4" class="linha">C#</label><br>
  </div>
</fieldset>

Figura 14: tag input com o atributo type="checkbox"
Fonte: Autoria própria

Valor type='submit'¶

  • É um botão de envio, remete os dados do formulário.

  • Exibido o conteúdo de value. Se o atributo name for inserido, ao enviar o formulário será enviado o name e o seu value.

  • Sintaxe:

Arquivo: index.html

<!-- Arquivo index.html -->
<!-- Estrutura HTML mantida a mesma do exemplo anterior, exceto a inclusão do input -->
<!-- Omitido para facilitar entendimento -->


<fieldset>
  <legend>Enviar o formulário</legend>
  <label for="texto">Botão do tipo submit</label><br>
  <input type="submit" id="texto">
</fieldset>

Arquivo: estilo.css

/* Arquivo estilo.css */
/* Modificado para formatar a propriedade CSS da tag input do tipo password */

input[type="submit"]{
  background: lightblue;
  color: darkblue;
}

Figura 15: tag input com o atributo type="submit"
Fonte: Autoria própria

Valor type="reset"¶

  • É um botão de redefinição.
  • Restaura o formulário com os valores padrão.

  • Não é muito usado devido a experiências desagradáveis.

  • Sintaxe:

<fieldset>
  <legend>Limpar o formulário</legend>
  <label for="texto">Type: reset</label><br>
  <input type="reset" id="texto"> 
</fieldset>

Valor type="file"¶

  • Tem por finalidade permitir que o usuário carregue, anexe ou interaja com um arquivo local a partir de seu computador ou rede.
  • Atributos permitidos: name, disabled, accept, autofocus, multiple, required, capture.

  • O atributo accept de alguns navegadores móveis permite acesso a câmera, microfone de alguns dispositivos.

  • Sintaxe:

Arquivo: index.html

<!-- Arquivo index.html -->
<!-- Estrutura HTML mantida a mesma do exemplo anterior, exceto a inclusão das opções do input -->
<!-- Omitido para facilitar entendimento --> 

<fieldset>
  <legend>Carregar arquivo</legend>
  <label for="texto">Type: file</label><br>
  <input type="file" id="texto"> 
</fieldset>

Figura 16: tag input com o atributo type="file"
Fonte: Autoria própria

Valor type="hidden"¶

  • Permite os atributos name, value. O campo com este tipo de dados não é exibido no formulário, utilizado para passar valores para os servidores.

  • Sintaxe:

Arquivo: index.html

<fieldset>
  <legend>Esconder</legend>
  <label for="texto">Type: hidden</label><br>
  <input type="hidden" id="texto"> 
</fieldset>

Valor type="image"¶

  • É semelhante ao comportamento do tipo submit e utiliza todos os atributos da tag <img>, especificamente src=" ", alt=" ".

  • Sintaxe:

Arquivo: index.html

<!-- Arquivo index.html -->
<!-- Estrutura HTML mantida a mesma do exemplo anterior, exceto a inclusão das opções do input -->
<!-- Omitido para facilitar entendimento --> 

<fieldset>
  <legend>Imagem</legend>
  <label for="texto">Type: image</label><br>
  <input type="image" id="texto" src="logoDWE.jpg"> 
</fieldset>

Arquivo: estilo.css

/* Arquivo estilo.css */
/* Modificado para formatar a propriedade CSS da tag input do tipo image */

input[type="image"] {
  width: 100px;
  height: 100px;
}

Imagem utilizada no exemplo: bola

Figura 17: tag input com o atributo type="image"
Fonte: Autoria própria

Valor type="button"¶

  • É um botão, e é usado para manipular eventos.

  • Sintaxe:

Arquivo: index.html

<!-- Arquivo index.html -->
<!-- Estrutura HTML mantida a mesma do exemplo anterior, exceto a inclusão das opções do input -->
<!-- Omitido para facilitar entendimento --> 

<fieldset>
  <legend>Botão</legend>
  <label for="texto">Type: button</label><br>
  <input type="button" id="texto" value="Executar">
</fieldset>

/* Inserir no arquivo .css */

input[type="button"] {
  background: lightblue;
  color: darkblue;
  font-size: 20px;
  margin: 10px;
  border-width: 0 2px 0 2px; /* Ordem: top, right, bottom, left */
  border-style: solid;
  border-color: #444;
}

Figura 18: tag input com o atributo type="button"
Fonte: Autoria própria

Surgiram com HTML5¶

Valor type="number"¶

  • É um campo de texto para inserir um número. Permitido a combinação dos atributos min, max e step. Em alguns dispositivos móveis permite exibir um teclado numérico.

  • Sintaxe:

Arquivo: index.html

<!-- Arquivo index.html -->
<!-- Estrutura HTML mantida a mesma do exemplo anterior, exceto a inclusão das opções do input -->
<!-- Omitido para facilitar entendimento --> 

<fieldset>
  <legend>Número</legend>
  <label for="texto">Type: number</label><br>
  <input type="number" id="texto" value="1">
</fieldset>

Figura 19: tag input com o atributo type="number"
Fonte: Autoria própria

Valor type="email"¶

  • É um campo destinado a inserção do email. O navegador fará a validação básica. Nos dispositivos móveis, o teclado é exibido A-Z, ponto, botão _123(leva ao teclado modificado) incluindo o caracter @.

  • Sintaxe:
    Arquivo: index.html

<!-- Arquivo index.html -->
<!-- Estrutura HTML mantida a mesma do exemplo anterior, exceto a inclusão das opções do input -->
<!-- Omitido para facilitar entendimento --> 

<fieldset>
  <legend>E-mail</legend>
  <label for="texto">Type: e-mail</label><br>
  <input type="email" id="texto" placeholder="xx.xx@ifsp.edu.br">
</fieldset>

Figura 20: tag input com o atributo type="email"
Fonte: Autoria própria

Valor type="search"¶

  • É um campo de busca, exibido como uma caixa com cantos arredondados. Em alguns navegadores aparece à direita um botão que pode limpá-lo quando selecionado. Já nos dispositivos móveis, exibe a lupa.

  • Sintaxe:

Arquivo: index.html

<!-- Arquivo index.html -->
<!-- Estrutura HTML mantida a mesma do exemplo anterior, exceto a inclusão das opções do input -->
<!-- Omitido para facilitar entendimento --> 

<fieldset>
  <legend>Pesquisa</legend>
  <label for="texto">Type: search</label><br>
  <input type="search" id="texto">
</fieldset>

Figura 21: tag input com o atributo type="search"
Fonte: Autoria própria

Valor type="tel"¶

  • É um campo utilizado para inserir um número de telefone. Não exige sintaxe ou padrão específico. Poderá inserir um atributo placeholder para indicar o formato de inserção, pattern para exigir o formato e codificar em javascript a validação deste número.

  • Sintaxe:

Arquivo: index.html

<!-- Arquivo index.html -->
<!-- Estrutura HTML mantida a mesma do exemplo anterior, exceto a inclusão das opções do input -->
<!-- Omitido para facilitar entendimento --> 

<fieldset>
  <legend>Telefone</legend>
  <label for="texto">Type: tel</label><br>
  <input type="tel" id="texto">
</fieldset>

Figura 22: tag input com o atributo type="tel"
Fonte: Autoria própria

Valor type="url"¶

  • É um campo utilizado para inserir um endereço web. O endereço deve ser inserido completo incluindo o teipo de protocolo. Nos dispositivos móveis, o teclado é exibido A-Z, ponto, barra inclinada e .com.
  • Sintaxe:

Arquivo: index.html

<!-- Arquivo index.html -->
<!-- Estrutura HTML mantida a mesma do exemplo anterior, exceto a inclusão das opções do input -->
<!-- Omitido para facilitar entendimento --> 

<fieldset>
  <legend>URL</legend>
  <label for="texto">Type: url</label><br>
  <input type="url" id="texto" placeholder="http://www.ifsp.edu.br">
</fieldset>

Figura 23: tag input com o atributo type="url"
Fonte: Autoria própria

Valor type="range"¶

  • É exibido na forma de um controle deslizante. Atributos permitidos min, max, step. Em value, defina o ponto inicial a posicionar a marcação do dezlizante.

  • Sintaxe:

Arquivo: index.html

<!-- Arquivo index.html -->
<!-- Estrutura HTML mantida a mesma do exemplo anterior, exceto a inclusão das opções do input -->
<!-- Omitido para facilitar entendimento --> 

<fieldset>
  <legend>Faixa</legend>
  <label for="texto">Type: range</label><br>
  <input type="range" id="texto" min="1" max="10" value="3">
</fieldset>

Figura 24: tag input com o atributo type="range"
Fonte: Autoria própria

Valor type="color"¶

  • Permite a seleção de uma cor. Utiliza a paleta de cores do sistema operacional. O valor padrão é #000000.

  • Sintaxe:

Arquivo: index.html

<!-- Arquivo index.html -->
<!-- Estrutura HTML mantida a mesma do exemplo anterior, exceto a inclusão das opções do input -->
<!-- Omitido para facilitar entendimento --> 

<fieldset>
  <legend>Cor</legend>
  <label for="texto">Type: color</label><br>
  <input type="color" id="texto">
</fieldset>

Figura 25: tag input com o atributo type="color"
Fonte: Autoria própria

Valor type="date"¶

  • Fornece uma data com ano, mês e dia. Alguns navegadores fornecem o suporte ao calendário.

  • Sintaxe:

Arquivo: index.html

<!-- Arquivo index.html -->
<!-- Estrutura HTML mantida a mesma do exemplo anterior, exceto a inclusão das opções do input -->
<!-- Omitido para facilitar entendimento --> 

<fieldset>
  <legend>Data</legend>
  <label for="texto">Type: date</label><br>
  <input type="date" id="texto">
</fieldset>

Figura 26: tag input com o atributo type="date"
Fonte: Autoria própria

Valor type="datetime-local"¶

  • Fornece dois campos: um para data (ano, mês, dia) e outro para hora (hora, minuto, segundo, fração de segundo). Permite usar os atributos min, max, step.

  • Sintaxe:

Arquivo: index.html

<!-- Arquivo index.html -->
<!-- Estrutura HTML mantida a mesma do exemplo anterior, exceto a inclusão das opções do input -->
<!-- Omitido para facilitar entendimento --> 

<fieldset>
  <legend>Data Local</legend>
  <label for="texto">Type: datetime</label><br>
  <input type="datetime-local" id="texto">
</fieldset>

Figura 27: tag input com o atributo type="datetime-local"
Fonte: Autoria própria

Valor type="month"¶

  • Fornece a inclusão do mês e do ano, sem o dia do mês e o fuso horário.
  • Sintaxe:

Arquivo: index.html

<!-- Arquivo index.html -->
<!-- Estrutura HTML mantida a mesma do exemplo anterior, exceto a inclusão das opções do input -->
<!-- Omitido para facilitar entendimento --> 

<fieldset>
  <legend>Mês</legend>
  <label for="texto">Type: month</label><br>
  <input type="month" id="texto">
</fieldset>

Figura 28: tag input com o atributo type="month"
Fonte: Autoria própria

Valor type="time"¶

  • Fornece um mecanismo que coloca a hora em formato de 24h. As horas podem ser maiores ou iguais a zero e menores do que 24h.
  • Sintaxe:

Arquivo: index.html

<!-- Arquivo index.html -->
<!-- Estrutura HTML mantida a mesma do exemplo anterior, exceto a inclusão das opções do input -->
<!-- Omitido para facilitar entendimento --> 

<fieldset>
  <legend>Time</legend>
  <label for="texto">Type: time</label><br>
  <input type="time" id="texto">
</fieldset>

Figura 29: tag input com o atributo type="time"
Fonte: Autoria própria

Valor type="week"¶

  • Permite o uso de uma data composta com o número da semana dentro de um ano, sem o mês, hora e dia.
  • Sintaxe:

Arquivo: index.html

<!-- Arquivo index.html -->
<!-- Estrutura HTML mantida a mesma do exemplo anterior, exceto a inclusão das opções do input -->
<!-- Omitido para facilitar entendimento --> 

<fieldset>
  <legend>Semana</legend>
  <label for="texto">Type: week</label><br>
  <input type="week" id="texto">
</fieldset>

Figura 30: tag input com o atributo type="week"
Fonte: Autoria própria

2.4. Tag selecte Atributo multiple¶

  • O atributo multiple permite a escolhe da mais de uma opção no campo ao ser usado com a tag <select>...</select>.
  • Para isso, mantenha a tecla ctrl pressionada enquanto seleciona os itens da lista. Mais itens irão aparecer ao rolar a barra para baixo.
  • Sintaxe: 
<label for="nome">Nome</label>
    <select multiple id="nome">
      <option>Ana Paula</option>
      <option>Paula</option>
      <option>Ana</option>
      <option>Paula Ana</option>
      <option>Aninha</option>
    </select>

Figura 31: tag select com o atributo multiple
Fonte: Autoria própria

2.4.1. Select, Option, Optgroup¶

  • A tag < select > especifica um menu de opções (seleção).
  • Um < select > deve conter um ou mais < option > ou, um ou mais < optgroup > contendo elementos < option >.
  • Sintaxe: 
<fieldset>
      <legend>Seletores</legend>
      <div>
        <label for="cores">Cores</label>
        <select name="tabelaCores" id="cores">
          <option value="0">Selecione..</option>
          <option value="1">vermelho</option>
          <option value="2">verde</option>
          <option value="3">amarelo</option>
        </select><br>
      </div>
    </fieldset>

Saída:

 
<fieldset>
      <legend>Seletores</legend>
      <div>
        <label for="dias">Dias da Semana</label><br>
        <div>
          <select name="DiasSemana" multiple id="dias">
            <option value="Dom">Domingo</option>
            <option value="Seg">Segunda</option>
            <option value="Ter">Terça</option>
            <option value="Qua">Quarta</option>
            <option value="Qui">Quinta</option>
            <option value="Sex">Sexta</option>
            <option value="Sab">Sábado</option>
          </select><br>
        </div>
      </div>
    </fieldset>

Saída:

<fieldset>
      <legend>Seletores</legend>
      <div class="form-group">
        <label for="equip">Equipamentos</label>
        <select name="equipa" id="equip">
          <option>Selecione...</option>
          <optgroup label="Hardware">
            <option value="tec">Teclado</option>
            <option value="mou">Mouse</option>
          </optgroup>
          <optgroup label="Software">
            <option value="java">Java</option>
            <option value="c#">C#</option>
          </optgroup>
        </select>
      </div>
    </fieldset>

Saída:

2.5. Atributo tabindex¶

  • O atributo tabindex: indica se um elemento pode receber foco de entrada (se ele é focável), se e em qual posição ele deve fazer parte da navegação sequencial do teclado (geralmente com a tecla Tab).
  • Sintaxe:
<fieldset>
        <legend>Informações Pessoais</legend>
        <p>Selecione qualquer um dos itens:</p>
        <label for="um">Elemento inicial:</label>
        <input type="text" id="um">
        <div tabindex="0">Segundo elemento.</div>
        <div>Elemento não indexado com tab.</div>
        <label for="tres">Terceiro elemento:</label>
        <input type="text" id="tres">
     </fieldset>

Saída:

2.6. Textarea¶

  • É um campo de texto de forma livre, sem restrições de quebra de linha. Bloco de texto rolável e de várias linhas.
  • O atributo wrap surgiu com o HTML5, especificando os Valores:
    • soft (default - o texto será enviado sem quebra de linha, caso não tenha sido inseridas) e
    • hard (inclui quebras de linhas explícitas).
  • Ao utilizar o atributo wrap como sendo hard, especifique também o atributo cols, obrigatoriamente. Utilize o CSS para definir largura e altura. E não mais o row e cols como era nas versões anteriores.
  • Sintaxe: 
<fieldset>
      <legend> Textarea </legend>
      <label for="texto">Textarea</label><br>
      <textarea id="texto" wrap="soft">Digite aqui seu texto</textarea> 
    </fieldset>


    <fieldset>
      <legend> Textarea </legend>
      <label for="texto">Textarea</label><br>
      <textarea id="texto" wrap="hard" cols="50">Digite aqui seu texto</textarea>
    </fieldset>

Saída:

wrap: soft wrap: hard cols = 20

2.7. Datalist, list¶

  • Para os tipos text, email, url, tipos relacionadas a data, hora e tipos numéricos do elemento < input >, o atributo list aponta para uma lista de valores que o navegador deve oferecer para o usuário, além de permitir a seleção.

  • O elemento list recebe como valor o identificador do elemento < datalist > que contém a lista.

  • Sintaxe:

<fieldset>
      <legend>Listagem</legend>
      <div hidden>
        <datalist id="contactlist" class="form-control">
          <option value="anapaula@xx.com.br" label="Ana Paula">
          <option value="paula@xx.com.br" label="Paula">
          <option value="giancoli@xx.com.br" label="Giancoli">
        </datalist>
      </div>
      <div class="form-group">
        <label for="contato">Contato:</label>
        <input class="form-control" type="email" id="contato" list="contactlist">
      </div>
    </fieldset>

Saída:

2.8. Button¶

  • O elemento < button > pode ser de 3 tipos: submit, reset, button. O valor defautl é submit.
  • Sintaxe: 
<fieldset>
      <legend>Botão Button</legend>
      <button type="button">Tipo button</button>
    </fieldset> 



    <fieldset>
      <legend>Botão Submit</legend>
      <button type="submit">Tipo submit</button>
    </fieldset>  



    <fieldset>
      <legend>Botão Reset</legend>
      <button type="reset">Tipo Reset</button>
    </fieldset>

Saída:

2.9. Output¶

  • É um elemento similar ao elemento < span >, porém pode ser usado para controle de formulário. Como novidade no HTML5, ele pode ter os atributos form, name, for e os eventos onchange, onforminput, onformchange além dos manipuladores de eventos universais.
  • Não tem o atributo value, sendo o seu valor definido pelo conteúdo inserido entre as tags < output > e < /output >.
  • Já o atributo for, tem um funcionamento diferente do for para o label. O for quando utilizado com output, recebe como valor uma lista separada de espaços com os identificadores dos outros elementos associados à saída.
  • Sintaxe: 
<fieldset>
        <legend>Uso do Output</legend>
        <h2>Multiplicação</h2>
        <form oninput="output.value = parseInt(val1.valueAsNumber || 0) * parseInt(val2.valueAsNumber || 0)" id=foo>
          <input id=a type=number name=val1 tabindex="1"> x
          <input id=b type=number name=val2 tabindex="2"> =
          <output name=output for="val1 val2" form=foo>000</output>
        </form>



        <h2>Soma</h2>
        <form oninput="output.value = parseInt(val3.valueAsNumber || 0) + parseInt(val4.valueAsNumber || 0)" id=foo1>
          <input id=c type=number name=val3 tabindex="3"> +
          <input id=d type=number name=val4 tabindex="4"> =
          <output name=output for="val3 val4" form=foo1>000</output>
        </form>



        <h2>Subtração</h2>
        <form oninput="output.value = parseInt(val5.valueAsNumber || 0) - parseInt(val6.valueAsNumber || 0)" id=foo2>
          <input id=e type=number name=val5 tabindex="5"> -
          <input id=f type=number name=val6 tabindex="6"> =
          <output name=output for="val5 val6" form=foo2>000</output>
        </form>



        <h2>Divisão</h2>
        <form oninput="output.value = parseInt(val7.valueAsNumber || 0) / parseInt(val8.valueAsNumber || 0)" id=foo3>
          <input id=g type=number name=val7 tabindex="7"> /
          <input id=h type=number name=val8 tabindex="8"> =
          <output name=output for="val7 val8" form=foo3>000</output>
        </form>
    </fieldset>

Saída:

2.10. Meter¶

  • Para aprofundamendo do assunto, consulte o artigo The HTML5 meter Element.
  • É utilizado como aferidor de alguma medida dentro de um intervalo conhecido.
  • É usado para indicar o valor atual em relação aos valores mínimo e máximo.
    • Os atributos permitidos com < meter > são min, max, high, low, optimum.
    • O atributo optimum fornece o valor do ponto que marca a posição ótima do aferidor.
    • Os atributos min e max, os respectivos valores mínimos e máximos.
    • Os atributos high e low, devem ser o menor valor que pode ser considerado um valor alto e o maior valor que pode ser considerado baixo.
  • Sugestão: utilize < meter > quando souber os valores mínimo e máximo e os valores puderem variar.

2.11. Progress¶

  • Semelhante ao < meter >, porém é utilizado para indicar progresso. Indica até que ponto evolui algo.
  • Os atributos permitidos são o value, max onde ambos são valores de ponto flutuante positivos. E valor menor do que max.
  • Sintaxe: 
<fieldset>
         <legend>Exemplos Range, Meter, Progress</legend>
         <h4>Range</h4>
         <input type="range" id="texto" name="range" min="0"  max="100" step="1"><br><br>

         <h4>Meter</h4>
         <meter value="60" name="meter" min="0"  max="100" low="73"  high="87">D--</meter><br><br>

         <h4>Progress</h4>
         <progress value="80" name="prog" max="100"><span id=""complete">0</span>%</progress>
    </fieldset>

Saída:

Referências¶

  • Esta aula foi elaborada a partir do conteúdo disponibilizado em cada um dos links indicados no próprio texto.

ADS - HTML5, CSS3, JS.
Modelo e formato elaborado pela profa. Ana Paula Müller Giancoli - BSD 2-Clause License. - Julho.2022.

</div> </div>